<template>
    <view class="container">
        <view class="coupon-list" v-if="list.length">
            <view class="coupon-item" v-for="(item, index) in list" :key="index">
                <view :class="'item-wrapper color__' + (item.state.value ? item.color.text : 'gray')">
                    <view class="coupon-type">{{ item.coupon_type.text }}</view>
                    <view class="tip dis-flex flex-dir-column flex-x-center">
                        <view v-if="item.coupon_type.value == 10">
                            <text class="f-30">￥</text>
                            <text class="money">{{ item.reduce_price }}</text>
                        </view>
                        <text class="money" v-if="item.coupon_type.value == 20">{{ item.discount }}折</text>
                        <text class="pay-line">满{{ item.min_price }}元可用</text>
                    </view>
                    <view class="split-line"></view>
                    <view class="content dis-flex flex-dir-column flex-x-between">
                        <view class="title">{{ item.name }}</view>
                        <view class="bottom dis-flex flex-y-center">
                            <view class="time flex-box">
                                <text v-if="item.expire_type == 10">领取{{ item.expire_day }}天内有效</text>
                                <text v-if="item.expire_type == 20">{{ item.start_time.text }}~{{ item.end_time.text }}</text>
                            </view>
                            <view class="receive" v-if="item.state.value" @tap.stop.prevent="receive" :data-coupon-id="item.coupon_id">
                                <text>立即领取</text>
                            </view>
                            <view class="receive state" v-else>
                                <text>{{ item.state.text }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else-if="notcont">
            <view class="yoshop-notcont">
                <text class="iconfont icon-wushuju"></text>
                <text class="cont">亲，暂无优惠券哦</text>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            // 优惠券列表
            list: [],
            // show
            notcont: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // 当前页面参数
        this.options = options;
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取优惠券列表
        this.getCouponList();
    },
    methods: {
        /**
         * 获取优惠券列表
         */
        getCouponList: function () {
            let that = this;
            app.globalData._get('coupon/lists', {}, function (result) {
                console.log(result.data.list.data);
                that.setData({
                    list: result.data.list.data,
                    notcont: !result.data.list.length
                });
            });
        },

        /**
         * 立即领取
         */
        receive: function (e) {
            let that = this;
            let couponId = e.currentTarget.dataset.couponId;
            app.globalData._post_form(
                'coupon/receive',
                {
                    coupon_id: couponId
                },
                function (result) {
                    app.globalData.showSuccess(result.msg);
                    // 获取优惠券列表
                    that.getCouponList();
                }
            );
        }
    }
};
</script>
<style>
@import './coupon.css';
</style>
